<template>
  <div style="background-color: #fff">
    <!-- 信息录入 -->
    <van-cell-group label-align="right">
      <van-field
        placeholder="请输入代理名称"
        :maxlength="20"
        v-model="title"
        required
        label-align="center"
        @focus="jie"
        @blur="jue"
      >
        <span slot="label">代&#12288;&#12288;理：</span>
      </van-field>
      <van-field
        placeholder="请输入代理人姓名"
        v-model="agent"
        required
        @focus="jie"
        @blur="jue"
      >
        <span slot="label">一级代理：</span>
      </van-field>

      <!-- 状态选择 -->
      <van-field label="开通时间：" v-model="address_detail" required>
        <span slot="input">
          <span @click="showTime('bg')" style="color: ">{{
            open_date == '' ? '请选择开通时间' : open_date
          }}</span>
          &#12288;
        </span>
      </van-field>

      <van-field
        label="客户姓名："
        v-model="custoername"
        placeholder="请输入客户姓名"
        style="boder: none"
        required
        @focus="jie"
        @blur="jue"
      />
      <van-field
        label="客户角色："
        v-model="address_detail"
        required
        @focus="jie"
        @blur="jue"
      >
        <span slot="input">
          <span @click="staterly()">{{
            stately == '' ? '请选择客户角色' : stately
          }}</span>
        </span>
      </van-field>

      <van-field
        placeholder="请输入费用"
        v-model="protuname"
        type="number"
        required
        @focus="jie"
        @blur="jue"
      >
        <span slot="label">费&#12288;用：</span>
      </van-field>

      <div style="padding: 0 16px">
        <van-button
          style="
            background-color: #ee3f00;
            width: 100%;
            color: #fff;
            margin-top: 10px;
            font-size: 18px;
          "
          @click="savePublish"
          >确定</van-button
        >
      </div>

      <!-- 出库日期 -->
      <van-popup v-model="showtime" position="bottom">
        <van-datetime-picker
          v-model="currentDate"
          @confirm="timeConfirm"
          type="date"
        />
      </van-popup>
      <!-- 状态 -->
      <van-popup v-model="showstaty" position="bottom">
        <van-picker
          title="状态"
          show-toolbar
          :columns="columns"
          @confirm="onConfirm"
          @cancel="onCancel"
          @change="onChange"
          type="string"
        />
      </van-popup>
    </van-cell-group>
    <van-tabbar
      v-model="ctive"
      style="position: fixed; bottom: 0px"
      v-show="jiejue"
    >
      <van-tabbar-item
        v-for="(tab, index) in tabb"
        :icon="tab.icon"
        :to="tab.path"
        :dot="tab.dot"
        :info="tab.info"
        :key="index"
        >{{ tab.name }}</van-tabbar-item
      >
    </van-tabbar>

    <!-- <shet /> -->
  </div>
</template>
<script>
import timeIno from '@/views/info/timeIno';
import areaList from '@/views/user/module-address-edit/area_all.json';
import {
  Image,
  Row,
  Col,
  Field,
  Button,
  Popup,
  Area,
  Stepper,
  Uploader,
  Toast,
  DatetimePicker,
  Dialog,
  Picker,
  Tabbar,
  TabbarItem,
} from 'vant';
import { qulifi } from '@/api/api';

import camera_icon from '@/assets/images/icons/camera_icon.png';
import myCropper from '@/views/common/my-cropper';
// import shet from '@/components/sheet';
import { getLocalStorage, setLOcalStorage } from '@/utils/local-storage';
export default {
  name: 'qualifications',
  props: {
    projectId: {
      type: [String, Number],
      default: -1,
    },
  },
  data() {
    return {
      jiejue: true,
      custoername: '',
      protuname: '',
      anumber: '',
      blanace: '',
      deposit: '',
      pice: '',
      protuname: '',
      Astately: '',
      showstaty: false,
      stately: '',
      agent: '',
      userLevel: 0,
      tel: '',
      show_default_img: false,
      camera_icon: camera_icon,
      title: '',
      workType: [],
      show: false,
      show_upload: false,
      showtime: false,
      time_type: 'bg',
      minDate: new Date(),
      currentDate: new Date(),
      columns: ['线上代理', '线下门店', '金牌会员'],
      staff: 0,
      open_date: '',
      end_date: '',
      unit_price: '',
      address: '',
      address_detail: '',
      addrCode: '321311',
      areaList: areaList,
      detail: '',
      wkTypeSelected: [],
      fileList: [],
      province_code: '',
      city_code: '',
      district_code: '',
      city: '',
      district: '',
      province: '',
      wkType: [],
      images: [],
      img_url: '',
      defaultImgList: [],
      defaultImgId: 'PROJECT.DEFAULT.IMG',
      chosed_default_img: '',
      mobile: '',
      wkTypeId: 'INFO.WORK.TYPE',
      userId: getLocalStorage('userId').userId,
      fail_reason: '',
      project_userId: '',
      status: -1,
      cropper_imgUrl: '',
      cropper_originName: '',
      show_cropper: false,
      ctive: 2,
      showtabbar: true,
      tabb: [
        {
          name: '产品表',
          path: '/record/product',
          pathName: 'product',
          icon: 'newspaper-o',
          // dot: false,
          info: '',
        },
        {
          name: '配件表',
          path: '/record/parts',
          pathName: 'parts',
          icon: 'hot-o',
          // dot: false,
          info: '',
        },
        {
          name: '资格表',
          path: '/record/qualifications',
          pathName: 'qualifications',
          icon: 'vip-card-o',
          // dot: false,
          info: '',
        },
      ],
    };
  },
  created() {
    this.savePublish();
  },
  methods: {
    jie() {
      this.jiejue = false;
    },
    jue() {
      this.jiejue = true;
    },
    savePublish() {
      if (this.title == '') {
        Toast('请输入代理名称');
        return;
      }
      if (this.agent == '') {
        Toast('请输入代理名称');
        return;
      }
      if (this.uesname == '') {
        Toast('请输入客户姓名');
        return;
      }

      if (this.stately == '') {
        Toast('请选择客户角色');
        return;
      }
      if (this.start_date == '') {
        Toast('请选择开通时间');
        return;
      }

      qulifi({
        rolename: this.stately,
        teamname: this.title,
        managername: this.agent,
        customername: this.custoername,
        moneyTotal: this.protuname,
        beginTime: this.dateFormat('YYYY-mm-dd 00:00:00', this.currentDate),
        remark: '',
        userId: Number(this.userId),
      }).then((res) => {
        console.log(res);
      });
      Toast('已提交,请等待审核结果');
      setTimeout(() => {
        this.$router.push({ path: '/user/business/card' });
      }, 1000);
    },

    // 函数与数据名称不能重名
    // 状态选择
    staterly() {
      this.showstaty = true;
    },
    // 总金额
    changeinput() {
      if (this.anumber == '' || this.pice == '') {
        this.Talpice = '';

        return;
      } else if (this.anumber != '' && this.pice != '') {
        this.Talpice = this.anumber * this.pice;
      }
    },
    dateFormat(fmt, date) {
      let ret;
      const opt = {
        'Y+': date.getFullYear().toString(), // 年
        'm+': (date.getMonth() + 1).toString(), // 月
        'd+': date.getDate().toString(), // 日
        'H+': date.getHours().toString(), // 时
        'M+': date.getMinutes().toString(), // 分
        'S+': date.getSeconds().toString(), // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
      };
      for (let k in opt) {
        ret = new RegExp('(' + k + ')').exec(fmt);
        if (ret) {
          fmt = fmt.replace(
            ret[1],
            ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, '0')
          );
        }
      }
      return fmt;
    },
    // 尾款
    changedep() {
      if (this.deposit === '') {
        this.blanace = '';
        return;
      } else {
        this.blanace = this.Talpice - this.deposit;
      }
    },

    // tap点击确定触发
    onConfirm(value, index) {
      // alert(index);
      if (index == 1) {
        this.stately = this.columns[1];
      } else if (index == 0) {
        this.stately = this.columns[0];
      } else {
        this.stately = this.columns[2];
      }
      this.showstaty = false;
    },
    // 移动触发
    onChange(picker, value, index) {},
    // 点击取消触发
    onCancel() {
      // Toast('取消');
    },

    initwkTypeSelected() {
      for (let i in this.wkTypes) {
        this.wkTypeSelected.push(this.workType[this.wkTypes[i]]);
      }
    },
    getAddressByDistrictCode(district_code) {
      if (
        district_code == undefined ||
        district_code == null ||
        district_code == ''
      ) {
        return '地区未知';
      }
      let province_code = district_code.substring(0, 2) + '0000';
      let city_code = district_code.substring(0, 4) + '00';
      let province_name = areaList.province_list[province_code];
      let city_name = areaList.city_list[city_code];
      let district_name = areaList.county_list[district_code];
      return province_name + city_name + district_name;
    },
    convertImgToBase64(imageFile, callback, errorCallback) {
      try {
        let reader = new FileReader();
        reader.readAsDataURL(imageFile);
        reader.onload = function (e) {
          if (callback) {
            let base64Str = e.target.result;
            callback(base64Str);
          }
        };
      } catch (error) {
        console.error(error);
        if (errorCallback) {
          errorCallback(error);
        }
      }
    },
    changeInputFile(event) {
      var files = event.target.files;
      if (!files.length) {
        return;
      }
      files = files.length === 1 ? files[0] : [].slice.call(files);
      if (files) {
        this.convertImgToBase64(files, (base64Str) =>
          this.convertCb(base64Str)
        );
        this.cropper_originName = files.name;
      }
    },
    convertCb(base64) {
      this.cropper_imgUrl = base64;
      this.show_cropper = true;
    },
    cropChange(data) {
      let that = this;
      if (data.imgUrl == null) {
        that.show_cropper = false;
      } else {
        this.img_url = data.imgUrl;
        that.show_cropper = false;
      }
    },
    getDefaultImgs() {
      dicItems({ groupId: this.defaultImgId })
        .then((res) => {
          this.defaultImgList = res.data.data.list;
          this.chosed_default_img = this.defaultImgList[0].itemValue;
        })
        .catch(() => {});
    },

    timeConfirm(value) {
      if (this.time_type == 'bg') {
        this.open_date = this.timeFormat(value);
      } else {
        this.end_date = this.timeFormat(value);
      }

      this.showtime = false;
    },

    timeFormat(time) {
      // 时间格式化 2019-09-08
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let day = time.getDate();
      if (month < 10) {
        month = '0' + month;
      }
      if (day < 10) {
        day = '0' + day;
      }
      return year + '-' + month + '-' + day;
    },
    showTime(type) {
      this.time_type = type;
      if (this.time_type == 'bg') {
        if (this.open_date != '') {
          this.currentDate = new Date(this.open_date);
        }
      } else {
        if (this.end_date != '') {
          this.currentDate = new Date(this.end_date);
        }
      }
      this.showtime = true;
    },
  },
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Field.name]: Field,
    [Image.name]: Image,
    [Uploader.name]: Uploader,
    [Popup.name]: Popup,
    [Area.name]: Area,
    [Toast.name]: Toast,
    [Picker.name]: Picker,
    [Stepper.name]: Stepper,
    [DatetimePicker.name]: DatetimePicker,
    [myCropper.name]: myCropper,
    [Dialog.Component.name]: Dialog.Component,
    timeIno,
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
    // shet
  },
};
</script>
<style lang="scss" scoped>
.van-field__label {
  width: 27%;
  text-align: center;
}
// .van-cell {
//   font-size: 2vh;
// }
.van-ellipsis {
  font-size: 14px;
}
.chose_default_button {
  display: inline-block;
  width: 80px;
  height: 24px;
  line-height: 24px;
  border: 1px solid #fff;
  font-size: 10px;
  color: #fff;
}
.deault_images_one {
  position: relative;
  text-align: center;
  width: 50%;
  padding-bottom: 50%;
  background-repeat: no-repeat;
  background-size: 99% 99%;
  -moz-background-size: 99% 99%;
  float: left;
  border-radius: 18px 18px 18px 18px;
}
.deault_images_two {
  position: relative;
  width: 50%;
  float: left;
  padding-bottom: 50%;
  border: 1px solid #fff;
}
.deault_images_0 {
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  width: 50%;
  padding-bottom: 50%;
  background-repeat: no-repeat;
  background-size: 98% 98%;
  -moz-background-size: 98% 98%;
  float: left;
  border-radius: 15px 15px 15px 15px;
}
.deault_images_1 {
  position: absolute;
  top: 0;
  left: 25%;
  text-align: center;
  width: 50%;
  margin-left: 25%;
  padding-bottom: 50%;
  background-repeat: no-repeat;
  background-size: 98% 98%;
  -moz-background-size: 98% 98%;
  float: left;
  border-radius: 15px 15px 15px 15px;
}
.deault_images_2 {
  position: absolute;
  top: 25%;
  left: 0;
  margin-top: 25%;
  text-align: center;
  width: 50%;
  padding-bottom: 50%;
  background-repeat: no-repeat;
  background-size: 98% 98%;
  -moz-background-size: 98% 98%;
  float: left;
  border-radius: 15px 15px 15px 15px;
}
.deault_images_3 {
  position: absolute;
  top: 25%;
  left: 25%;
  margin-left: 25%;
  margin-top: 25%;
  text-align: center;
  width: 50%;
  padding-bottom: 50%;
  background-repeat: no-repeat;
  background-size: 98% 98%;
  -moz-background-size: 98% 98%;
  float: left;
  border-radius: 15px 15px 15px 15px;
}
.confirm_button {
  display: inline-block;
  color: #fff;
  position: absolute;
  bottom: 15px;
  left: 50%;
  margin-left: -40px;
  width: 80px;
  font-size: 16px;
  border-radius: 5px;
  text-align: center;
  border: 1px solid #fff;
}
.deault_images_others {
  text-align: center;
  width: 25%;
  padding-bottom: 25%;
  background-repeat: no-repeat;
  background-size: 98% 98%;
  -moz-background-size: 98% 98%;
  float: left;
  border-radius: 15px 15px 15px 15px;
}
/deep/ .vs__dropdown-toggle {
  border-radius: 0;
}
.view-router {
  padding-bottom: 20px;
}
.work_type {
  overflow: visible;
}
.work_type /deep/ .van-cell__value {
  overflow: visible;
}
/deep/ .vs__selected {
  background-color: #ee3f00;
  color: #fff;
  border: 0;
}
/deep/ .vs__deselect {
  fill: #fff;
}
</style>
